<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>谈一谈设计原则 | aiyoudiao</title>
    <meta name="generator" content="VuePress 1.9.10" />
    <link rel="icon" href="/img/blog.ico">
    <script src="https://cdn.jsdelivr.net/npm/live2d-widget@3.1.4/lib/L2Dwidget.min.js"></script> <meta name="description" content="码二~">
    <meta name="keywords" content="前端博客,个人技术博客,前端,前端开发,前端框架,web前端,前端面试题,技术文档,学习,面试,JavaScript,js,ES6,TypeScript,vue,python,css3,html5,Node,git,github,gitee,markdown">
    <meta name="theme-color" content="#11a8cd">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <link rel="preload" href="/assets/css/0.styles.146197cf.css" as="style"><link rel="preload" href="/assets/js/app.bd2fbc77.js" as="script"><link rel="preload" href="/assets/js/3.72c9c947.js" as="script"><link rel="preload" href="/assets/js/147.1dfd721d.js" as="script"><link rel="preload" href="/assets/js/42.4251ca36.js" as="script"><link rel="prefetch" href="/assets/js/1.4ed4671d.js"><link rel="prefetch" href="/assets/js/10.bd6ddb58.js"><link rel="prefetch" href="/assets/js/100.20d2348f.js"><link rel="prefetch" href="/assets/js/101.ba7b784c.js"><link rel="prefetch" href="/assets/js/102.c3e2dcae.js"><link rel="prefetch" href="/assets/js/103.0f4c50f3.js"><link rel="prefetch" href="/assets/js/104.ef47a111.js"><link rel="prefetch" href="/assets/js/105.2e00f516.js"><link rel="prefetch" href="/assets/js/106.b50e19b9.js"><link rel="prefetch" href="/assets/js/107.e125a8f6.js"><link rel="prefetch" href="/assets/js/108.770493ab.js"><link rel="prefetch" href="/assets/js/109.74766d7b.js"><link rel="prefetch" href="/assets/js/11.f786a5ee.js"><link rel="prefetch" href="/assets/js/110.0b0ee5b4.js"><link rel="prefetch" href="/assets/js/111.835b0e44.js"><link rel="prefetch" href="/assets/js/112.352fa217.js"><link rel="prefetch" href="/assets/js/113.4e908557.js"><link rel="prefetch" href="/assets/js/114.7b77996d.js"><link rel="prefetch" href="/assets/js/115.bdc61268.js"><link rel="prefetch" href="/assets/js/116.d5da9b8b.js"><link rel="prefetch" href="/assets/js/117.35ab1f9f.js"><link rel="prefetch" href="/assets/js/118.517c151d.js"><link rel="prefetch" href="/assets/js/119.f7f49ba8.js"><link rel="prefetch" href="/assets/js/12.3c729a65.js"><link rel="prefetch" href="/assets/js/120.b559598b.js"><link rel="prefetch" href="/assets/js/121.bf8a2f43.js"><link rel="prefetch" href="/assets/js/122.11a0bc97.js"><link rel="prefetch" href="/assets/js/123.2bafdde7.js"><link rel="prefetch" href="/assets/js/124.dc393688.js"><link rel="prefetch" href="/assets/js/125.ed3f389a.js"><link rel="prefetch" href="/assets/js/126.8fd9a57d.js"><link rel="prefetch" href="/assets/js/127.3bf2a1f2.js"><link rel="prefetch" href="/assets/js/128.b9c671d3.js"><link rel="prefetch" href="/assets/js/129.5d331f0d.js"><link rel="prefetch" href="/assets/js/13.7b1a1fe5.js"><link rel="prefetch" href="/assets/js/130.53e4f9c6.js"><link rel="prefetch" href="/assets/js/131.dcc47e1d.js"><link rel="prefetch" href="/assets/js/132.692dcdcd.js"><link rel="prefetch" href="/assets/js/133.e293202c.js"><link rel="prefetch" href="/assets/js/134.593dccf2.js"><link rel="prefetch" href="/assets/js/135.d76d384b.js"><link rel="prefetch" href="/assets/js/136.a519c23c.js"><link rel="prefetch" href="/assets/js/137.b1821288.js"><link rel="prefetch" href="/assets/js/138.5bcea4ef.js"><link rel="prefetch" href="/assets/js/139.076664b0.js"><link rel="prefetch" href="/assets/js/14.35f257b2.js"><link rel="prefetch" href="/assets/js/140.a019e655.js"><link rel="prefetch" href="/assets/js/141.1f70e1c7.js"><link rel="prefetch" href="/assets/js/142.5ed728fd.js"><link rel="prefetch" href="/assets/js/143.1c8cdc78.js"><link rel="prefetch" href="/assets/js/144.b0cb125b.js"><link rel="prefetch" href="/assets/js/145.c0209a76.js"><link rel="prefetch" href="/assets/js/146.551469f4.js"><link rel="prefetch" href="/assets/js/148.91d07ef5.js"><link rel="prefetch" href="/assets/js/149.5b88b710.js"><link rel="prefetch" href="/assets/js/15.23bbc29a.js"><link rel="prefetch" href="/assets/js/150.8301107f.js"><link rel="prefetch" href="/assets/js/151.867da089.js"><link rel="prefetch" href="/assets/js/152.935d5046.js"><link rel="prefetch" href="/assets/js/153.f39d8435.js"><link rel="prefetch" href="/assets/js/154.6b9eb2c3.js"><link rel="prefetch" href="/assets/js/155.14283ad4.js"><link rel="prefetch" href="/assets/js/156.2d7c1a2a.js"><link rel="prefetch" href="/assets/js/157.2f28d02f.js"><link rel="prefetch" href="/assets/js/158.151221ae.js"><link rel="prefetch" href="/assets/js/159.ef6d7ffe.js"><link rel="prefetch" href="/assets/js/16.1793aef7.js"><link rel="prefetch" href="/assets/js/160.de54c4ea.js"><link rel="prefetch" href="/assets/js/161.24d4e57c.js"><link rel="prefetch" href="/assets/js/162.632032fe.js"><link rel="prefetch" href="/assets/js/163.fd01cd99.js"><link rel="prefetch" href="/assets/js/164.45f203f5.js"><link rel="prefetch" href="/assets/js/165.aafe4fe1.js"><link rel="prefetch" href="/assets/js/166.1dd1d21c.js"><link rel="prefetch" href="/assets/js/167.5501b3a1.js"><link rel="prefetch" href="/assets/js/168.fbe58b1f.js"><link rel="prefetch" href="/assets/js/169.2cae7f5e.js"><link rel="prefetch" href="/assets/js/17.bbfe63f2.js"><link rel="prefetch" href="/assets/js/170.265f7c9e.js"><link rel="prefetch" href="/assets/js/171.b61f327d.js"><link rel="prefetch" href="/assets/js/172.5d0043fd.js"><link rel="prefetch" href="/assets/js/173.45284bb6.js"><link rel="prefetch" href="/assets/js/174.9130e0c4.js"><link rel="prefetch" href="/assets/js/175.2b38bddd.js"><link rel="prefetch" href="/assets/js/176.9772cf09.js"><link rel="prefetch" href="/assets/js/177.69048ebc.js"><link rel="prefetch" href="/assets/js/178.e10d7ce5.js"><link rel="prefetch" href="/assets/js/179.3789edc0.js"><link rel="prefetch" href="/assets/js/18.0807ded0.js"><link rel="prefetch" href="/assets/js/180.ab675e47.js"><link rel="prefetch" href="/assets/js/181.2e39eff0.js"><link rel="prefetch" href="/assets/js/19.becf5a76.js"><link rel="prefetch" href="/assets/js/2.eb089a4f.js"><link rel="prefetch" href="/assets/js/20.cea59652.js"><link rel="prefetch" href="/assets/js/21.58c43ff1.js"><link rel="prefetch" href="/assets/js/22.f73b825d.js"><link rel="prefetch" href="/assets/js/23.43b13730.js"><link rel="prefetch" href="/assets/js/24.f77f93ca.js"><link rel="prefetch" href="/assets/js/25.7dfaf3fb.js"><link rel="prefetch" href="/assets/js/26.629d28e5.js"><link rel="prefetch" href="/assets/js/27.4fff23ea.js"><link rel="prefetch" href="/assets/js/28.1b8ae389.js"><link rel="prefetch" href="/assets/js/29.d5cce9a0.js"><link rel="prefetch" href="/assets/js/30.961d5519.js"><link rel="prefetch" href="/assets/js/31.121dd1af.js"><link rel="prefetch" href="/assets/js/32.4a3c5df7.js"><link rel="prefetch" href="/assets/js/33.5537f44b.js"><link rel="prefetch" href="/assets/js/34.1d4d4653.js"><link rel="prefetch" href="/assets/js/35.d094209b.js"><link rel="prefetch" href="/assets/js/36.832660c5.js"><link rel="prefetch" href="/assets/js/37.145c3665.js"><link rel="prefetch" href="/assets/js/38.4f369bfe.js"><link rel="prefetch" href="/assets/js/39.ba060044.js"><link rel="prefetch" href="/assets/js/4.66d742f6.js"><link rel="prefetch" href="/assets/js/40.e50e0379.js"><link rel="prefetch" href="/assets/js/41.4ed7617c.js"><link rel="prefetch" href="/assets/js/43.d22b74c4.js"><link rel="prefetch" href="/assets/js/44.59439f9d.js"><link rel="prefetch" href="/assets/js/45.da28bc46.js"><link rel="prefetch" href="/assets/js/46.b8db1176.js"><link rel="prefetch" href="/assets/js/47.7ed16fc7.js"><link rel="prefetch" href="/assets/js/48.c982d5ed.js"><link rel="prefetch" href="/assets/js/49.a7579f55.js"><link rel="prefetch" href="/assets/js/5.08802d7d.js"><link rel="prefetch" href="/assets/js/50.103b5bf6.js"><link rel="prefetch" href="/assets/js/51.0fe9d79a.js"><link rel="prefetch" href="/assets/js/52.9ba31e26.js"><link rel="prefetch" href="/assets/js/53.0e8bc1f0.js"><link rel="prefetch" href="/assets/js/54.9566e517.js"><link rel="prefetch" href="/assets/js/55.a124abae.js"><link rel="prefetch" href="/assets/js/56.d9cf0800.js"><link rel="prefetch" href="/assets/js/57.93599da0.js"><link rel="prefetch" href="/assets/js/58.d943f85b.js"><link rel="prefetch" href="/assets/js/59.50a66488.js"><link rel="prefetch" href="/assets/js/6.a3ea60eb.js"><link rel="prefetch" href="/assets/js/60.21aa3aa3.js"><link rel="prefetch" href="/assets/js/61.6712c00f.js"><link rel="prefetch" href="/assets/js/62.eff3e4b1.js"><link rel="prefetch" href="/assets/js/63.09701d5a.js"><link rel="prefetch" href="/assets/js/64.eb440dec.js"><link rel="prefetch" href="/assets/js/65.aeed0579.js"><link rel="prefetch" href="/assets/js/66.97244c64.js"><link rel="prefetch" href="/assets/js/67.e01c5c24.js"><link rel="prefetch" href="/assets/js/68.21be91ba.js"><link rel="prefetch" href="/assets/js/69.c0849905.js"><link rel="prefetch" href="/assets/js/7.7fd40e91.js"><link rel="prefetch" href="/assets/js/70.b32bbe5d.js"><link rel="prefetch" href="/assets/js/71.0efbc0c7.js"><link rel="prefetch" href="/assets/js/72.ef963181.js"><link rel="prefetch" href="/assets/js/73.ca7dd5db.js"><link rel="prefetch" href="/assets/js/74.4483ede8.js"><link rel="prefetch" href="/assets/js/75.374ab483.js"><link rel="prefetch" href="/assets/js/76.b4a39f08.js"><link rel="prefetch" href="/assets/js/77.6b30c3cd.js"><link rel="prefetch" href="/assets/js/78.15376c33.js"><link rel="prefetch" href="/assets/js/79.3153fcec.js"><link rel="prefetch" href="/assets/js/80.9a88c684.js"><link rel="prefetch" href="/assets/js/81.1e3f842c.js"><link rel="prefetch" href="/assets/js/82.996dbd3d.js"><link rel="prefetch" href="/assets/js/83.955158bf.js"><link rel="prefetch" href="/assets/js/84.71bdc76d.js"><link rel="prefetch" href="/assets/js/85.774e49f2.js"><link rel="prefetch" href="/assets/js/86.bebf32e5.js"><link rel="prefetch" href="/assets/js/87.becdbde1.js"><link rel="prefetch" href="/assets/js/88.49e933f4.js"><link rel="prefetch" href="/assets/js/89.eeceedfd.js"><link rel="prefetch" href="/assets/js/90.3ea6dd12.js"><link rel="prefetch" href="/assets/js/91.62a6a556.js"><link rel="prefetch" href="/assets/js/92.e2ebb8f5.js"><link rel="prefetch" href="/assets/js/93.dcdefe7a.js"><link rel="prefetch" href="/assets/js/94.bf412146.js"><link rel="prefetch" href="/assets/js/95.8deadcdc.js"><link rel="prefetch" href="/assets/js/96.9977087a.js"><link rel="prefetch" href="/assets/js/97.6591f9da.js"><link rel="prefetch" href="/assets/js/98.4db7f75e.js"><link rel="prefetch" href="/assets/js/99.a61462e9.js"><link rel="prefetch" href="/assets/js/vendors~docsearch.2852b102.js"> <link rel="stylesheet" href="/assets/css/0.styles.146197cf.css">
  </head>
  <body class="theme-mode-light">
    <div id="app" data-server-rendered="true"><div class="theme-container sidebar-open have-rightmenu"><header class="navbar blur"><div title="目录" class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" width="50" height="50" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><img src="https://p3-passport.byteacctimg.com/img/user-avatar/794fdae4ff249d532da19a3c26d420ed~300x300.image" alt="aiyoudiao" class="logo"> <span class="site-name can-hide">
      aiyoudiao
    </span></a> <div class="links"><div class="sky-switch" data-v-3a03d589><label for="toggle" data-v-3a03d589><input id="toggle" type="checkbox" data-v-3a03d589><div data-v-3a03d589></div></label></div> <div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="笔记" class="dropdown-title"><!----> <span class="title" style="display:;">笔记</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/pages/84633490449/" class="nav-link">
  JavaScript
</a></li><li class="dropdown-item"><!----> <a href="/pages/2331001041/" class="nav-link">
  Vue
</a></li><li class="dropdown-item"><!----> <a href="/pages/18114480448/" class="nav-link">
  React
</a></li><li class="dropdown-item"><!----> <a href="/pages/25236260426/" class="nav-link">
  低代码
</a></li><li class="dropdown-item"><!----> <a href="/pages/35345230523/" class="nav-link">
  线性系统
</a></li><li class="dropdown-item"><!----> <a href="/pages/08313561056/" class="nav-link">
  暂未分类
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="算法与设计" class="dropdown-title"><!----> <span class="title" style="display:;">算法与设计</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/pages/70741550255/" class="nav-link">
  LeetCode
</a></li><li class="dropdown-item"><!----> <a href="/pages/17845450445/" class="nav-link">
  算法
</a></li><li class="dropdown-item"><!----> <a href="/pages/90132170217/" class="nav-link">
  数据结构
</a></li><li class="dropdown-item"><!----> <a href="/pages/50546120212/" class="nav-link">
  设计模式
</a></li><li class="dropdown-item"><!----> <a href="/pages/02344550255/" class="nav-link">
  Other
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="技能" class="dropdown-title"><!----> <span class="title" style="display:;">技能</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/pages/82158160216/" class="nav-link">
  PMP
</a></li><li class="dropdown-item"><!----> <a href="/pages/41858590259/" class="nav-link">
  Office
</a></li><li class="dropdown-item"><!----> <a href="/pages/02359360236/" class="nav-link">
  面试
</a></li><li class="dropdown-item"><!----> <a href="/pages/73600130213/" class="nav-link">
  Bash
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="历程" class="dropdown-title"><!----> <span class="title" style="display:;">历程</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/pages/83857320232/" class="nav-link">
  流年往事
</a></li><li class="dropdown-item"><!----> <a href="/pages/93419130213/" class="nav-link">
  经验片段
</a></li><li class="dropdown-item"><!----> <a href="/pages/99744220322/" class="nav-link">
  读书杂感
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="首页" class="dropdown-title"><!----> <span class="title" style="display:;">首页</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/archives/" class="nav-link">
  归档
</a></li><li class="dropdown-item"><!----> <a href="/categories/" class="nav-link">
  分类
</a></li><li class="dropdown-item"><!----> <a href="/tags/" class="nav-link">
  标签
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="其它" class="dropdown-title"><!----> <span class="title" style="display:;">其它</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/pages/02657130213/" class="nav-link">
  简介
</a></li><li class="dropdown-item"><!----> <a href="/pages/5390102042/" class="nav-link">
  收藏
</a></li><li class="dropdown-item"><!----> <a href="/pages/32309510451/" class="nav-link">
  有趣
</a></li><li class="dropdown-item"><!----> <a href="/pages/23313210521/" class="nav-link">
  文档
</a></li></ul></div></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar-hover-trigger"></div> <aside class="sidebar" style="display:none;"><div class="blogger"><img src="/img/mar.jpg"> <div class="blogger-info"><h3>码二</h3> <span>扫微信二维码，认识一下码二吧😉。</span></div></div> <nav class="nav-links"><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="笔记" class="dropdown-title"><!----> <span class="title" style="display:;">笔记</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/pages/84633490449/" class="nav-link">
  JavaScript
</a></li><li class="dropdown-item"><!----> <a href="/pages/2331001041/" class="nav-link">
  Vue
</a></li><li class="dropdown-item"><!----> <a href="/pages/18114480448/" class="nav-link">
  React
</a></li><li class="dropdown-item"><!----> <a href="/pages/25236260426/" class="nav-link">
  低代码
</a></li><li class="dropdown-item"><!----> <a href="/pages/35345230523/" class="nav-link">
  线性系统
</a></li><li class="dropdown-item"><!----> <a href="/pages/08313561056/" class="nav-link">
  暂未分类
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="算法与设计" class="dropdown-title"><!----> <span class="title" style="display:;">算法与设计</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/pages/70741550255/" class="nav-link">
  LeetCode
</a></li><li class="dropdown-item"><!----> <a href="/pages/17845450445/" class="nav-link">
  算法
</a></li><li class="dropdown-item"><!----> <a href="/pages/90132170217/" class="nav-link">
  数据结构
</a></li><li class="dropdown-item"><!----> <a href="/pages/50546120212/" class="nav-link">
  设计模式
</a></li><li class="dropdown-item"><!----> <a href="/pages/02344550255/" class="nav-link">
  Other
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="技能" class="dropdown-title"><!----> <span class="title" style="display:;">技能</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/pages/82158160216/" class="nav-link">
  PMP
</a></li><li class="dropdown-item"><!----> <a href="/pages/41858590259/" class="nav-link">
  Office
</a></li><li class="dropdown-item"><!----> <a href="/pages/02359360236/" class="nav-link">
  面试
</a></li><li class="dropdown-item"><!----> <a href="/pages/73600130213/" class="nav-link">
  Bash
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="历程" class="dropdown-title"><!----> <span class="title" style="display:;">历程</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/pages/83857320232/" class="nav-link">
  流年往事
</a></li><li class="dropdown-item"><!----> <a href="/pages/93419130213/" class="nav-link">
  经验片段
</a></li><li class="dropdown-item"><!----> <a href="/pages/99744220322/" class="nav-link">
  读书杂感
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="首页" class="dropdown-title"><!----> <span class="title" style="display:;">首页</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/archives/" class="nav-link">
  归档
</a></li><li class="dropdown-item"><!----> <a href="/categories/" class="nav-link">
  分类
</a></li><li class="dropdown-item"><!----> <a href="/tags/" class="nav-link">
  标签
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="其它" class="dropdown-title"><!----> <span class="title" style="display:;">其它</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/pages/02657130213/" class="nav-link">
  简介
</a></li><li class="dropdown-item"><!----> <a href="/pages/5390102042/" class="nav-link">
  收藏
</a></li><li class="dropdown-item"><!----> <a href="/pages/32309510451/" class="nav-link">
  有趣
</a></li><li class="dropdown-item"><!----> <a href="/pages/23313210521/" class="nav-link">
  文档
</a></li></ul></div></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>LeetCode</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>算法</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>数据结构</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>设计模式</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/pages/50546120212/" class="sidebar-link">浅聊设计理念</a></li><li><a href="/pages/95627170217/" aria-current="page" class="active sidebar-link">谈一谈设计原则</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/pages/95627170217/#设计模式中的十大原则" class="sidebar-link">设计模式中的十大原则</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/pages/95627170217/#单一职责原则-srp" class="sidebar-link">单一职责原则 SRP</a></li><li class="sidebar-sub-header"><a href="/pages/95627170217/#开放封闭原则-ocp" class="sidebar-link">开放封闭原则 OCP</a></li><li class="sidebar-sub-header"><a href="/pages/95627170217/#里氏替换原则-lsp" class="sidebar-link">里氏替换原则 LSP</a></li><li class="sidebar-sub-header"><a href="/pages/95627170217/#接口隔离原则-isp" class="sidebar-link">接口隔离原则 ISP</a></li><li class="sidebar-sub-header"><a href="/pages/95627170217/#依赖倒置原则-dip" class="sidebar-link">依赖倒置原则 DIP</a></li><li class="sidebar-sub-header"><a href="/pages/95627170217/#迪米法特原则-lod-最少原则" class="sidebar-link">迪米法特原则 LOD(最少原则)</a></li><li class="sidebar-sub-header"><a href="/pages/95627170217/#组合聚合复用原则-crp" class="sidebar-link">组合聚合复用原则 CRP</a></li><li class="sidebar-sub-header"><a href="/pages/95627170217/#不重复你自己-dry" class="sidebar-link">不重复你自己 DRY</a></li><li class="sidebar-sub-header"><a href="/pages/95627170217/#尽量保持简单-kiss-简单原则" class="sidebar-link">尽量保持简单 KISS(简单原则)</a></li><li class="sidebar-sub-header"><a href="/pages/95627170217/#不过度设计-yagni" class="sidebar-link">不过度设计 YAGNI</a></li></ul></li></ul></li><li><a href="/pages/6423406026/" class="sidebar-link">工厂方法模式</a></li><li><a href="/pages/55439310231/" class="sidebar-link">抽象工厂模式</a></li><li><a href="/pages/01945290229/" class="sidebar-link">建造者模式</a></li><li><a href="/pages/2011504024/" class="sidebar-link">原型模式</a></li><li><a href="/pages/09418490249/" class="sidebar-link">单例模式</a></li><li><a href="/pages/84523100210/" class="sidebar-link">桥接模式</a></li><li><a href="/pages/45526410241/" class="sidebar-link">代理模式</a></li><li><a href="/pages/05304400240/" class="sidebar-link">装饰器模式</a></li><li><a href="/pages/40707180218/" class="sidebar-link">适配器模式</a></li><li><a href="/pages/20709510251/" class="sidebar-link">享元模式</a></li><li><a href="/pages/69112310231/" class="sidebar-link">组合模式</a></li><li><a href="/pages/59338220222/" class="sidebar-link">外观模式</a></li><li><a href="/pages/91241140214/" class="sidebar-link">观察者模式</a></li><li><a href="/pages/48444540254/" class="sidebar-link">模板方法模式</a></li><li><a href="/pages/94547210221/" class="sidebar-link">策略模式</a></li><li><a href="/pages/64541200220/" class="sidebar-link">职责链模式</a></li><li><a href="/pages/15543380238/" class="sidebar-link">状态模式</a></li><li><a href="/pages/73549120212/" class="sidebar-link">迭代器模式</a></li><li><a href="/pages/81151430243/" class="sidebar-link">访问者模式</a></li><li><a href="/pages/87409260226/" class="sidebar-link">备忘录模式</a></li><li><a href="/pages/62611170217/" class="sidebar-link">命令模式</a></li><li><a href="/pages/1021407027/" class="sidebar-link">解释器模式</a></li><li><a href="/pages/56121130213/" class="sidebar-link">中介者模式</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Other</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>vue3设计与实现</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <div><main class="page"> <div class="theme-vdoing-wrapper bg-style-1"><div class="articleInfo-wrap" data-v-18fb2c02><div class="articleInfo" data-v-18fb2c02><ul class="breadcrumbs" data-v-18fb2c02><li data-v-18fb2c02><a href="/" title="首页" class="iconfont icon-home router-link-active" data-v-18fb2c02></a></li> <li data-v-18fb2c02><a href="/categories/?category=%E7%AE%97%E6%B3%95%E4%B8%8E%E8%AE%BE%E8%AE%A1" title="分类" data-v-18fb2c02>
          算法与设计
        </a></li> <li data-v-18fb2c02><a href="/categories/?category=%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F" title="分类" data-v-18fb2c02>
          设计模式
        </a></li> <!----></ul> <div class="info" data-v-18fb2c02><div title="作者" class="author iconfont icon-touxiang" data-v-18fb2c02><a href="javascript:;" data-v-18fb2c02>aiyoudiao</a></div> <div title="创建时间" class="date iconfont icon-riqi" data-v-18fb2c02><a href="javascript:;" data-v-18fb2c02>2022-02-20</a></div> <!----></div></div></div> <!----> <div class="content-wrapper"><div class="right-menu-wrapper"><div class="right-menu-margin"><div class="right-menu-content"></div></div></div> <h1><!----> <span>
            谈一谈设计原则
          </span></h1> <div class="theme-vdoing-content content__default"><h2 id="设计模式中的十大原则"><a href="#设计模式中的十大原则" class="header-anchor">#</a> 设计模式中的十大原则</h2> <p>死记是没有用的，正如教条主义式的生搬硬套没有多少作用，理解了才能举一反三、灵活运用。</p> <p>我们可以再弄清楚十大原则：单一职责原则、开放封闭原则、里氏替换原则、接口隔离原则、依赖倒置原则、
迪米法特原则、组合聚合复用原则、不重复你自己、尽量保持简单、不过度设计。</p> <h3 id="单一职责原则-srp"><a href="#单一职责原则-srp" class="header-anchor">#</a> 单一职责原则 SRP</h3> <p>每一个&quot;代码块儿&quot;负责的功能要单一。</p> <p>一个简单的场景，当一个“代码块”中负责了A、B、C、D四个功能，这个代码块儿中的功能A需求发生了变化，由于ABCD四个功能都在一个代码块中，修改了A就可能会导致BCD都受到不同程度的污染，又得再去修改BCD这三个功能。</p> <p>这个场景在工作中是非常常见的，如果ABCD这四个功能的并不是强关联的，其实可以把它们进行拆分，这样通过“参数传递和返回值”的方式就能保持它们之间的正常通信。</p> <p>注意单一职责要边界划分的意识，比如 按照 代码片段来划分、注释来划分、函数来划分、类或对象来划分、模块来划分、组件来划分、文件来划分、目录来划分、项目或工程来划分等等。</p> <h3 id="开放封闭原则-ocp"><a href="#开放封闭原则-ocp" class="header-anchor">#</a> 开放封闭原则 OCP</h3> <p>一个健壮的程序，它的扩展性会很不错，所以要对扩展开放。
一个优秀的程序，它的代码不应改来改去，所以要对修改封闭。</p> <p>一个简单的场景，在页面中渲染一个列表的数据，这个列表中目前有五项数据，每一项数据分别都有type这个属性，type 分别为 one、two、three、four、five。</p> <p>冲着对扩展开放的想法，肯定会以遍历的方式去取出其中每一项数据，然后逐一渲染，更好一点的话，将这部分数据重新过滤一下，将数据结构过滤成最合适的格式，这样就不需要在页面中去做逻辑判断了，直接在你封装的这个过滤函数中统一处理。</p> <p>如果不想着扩展开放修改封闭，那么就会直接取出五项数据，直接渲染它们，但这样做会导致以后增加一个six、seven等，就需要往里面再加新的逻辑代码了。</p> <p>同样的，也要注意边界的划分、复杂度的辨识，是否是相同的问题，如果是相同的问题，其实可以直接一个遍历就完成。如果不是相同的问题，但这些问题都很相近，可以通过将这些问题转换成相同的问题，最后再直接一个遍历完成。</p> <p>扩展不扩展要看具体业务功能，如果实在不需要，就不用那么做，过度去设计如何扩展，会导致程序的复杂度提升、工作量提升。</p> <p>修改封闭，有时并不能完全对修改封闭，但是可以减少修改的成本，比如一个文件几千行，你在几千行文件中进行修改，和在一个百来行的文件中进行修改，复杂度是不一样的。分而治之和统一管理都可以根据实际情况来划分。</p> <p>严格的开放封闭，需要能够动态加载，当然在代码程度上肯定得支持这种方式。</p> <h3 id="里氏替换原则-lsp"><a href="#里氏替换原则-lsp" class="header-anchor">#</a> 里氏替换原则 LSP</h3> <p>抽象的理解，你实现的子程序可以替换父程序来进行扩展或切换全新的功能实现。
具体的理解，父程序无法满足现有业务的功能需求，需要在父程序的基础上进行扩展，实现一个子程序，父程序的引用会指向子程序的实例对象。</p> <p>比如在前端中，我要以一个表格的方式展示数据，我会使用element ui 官网的el-table组件，但是随着业务的复杂度提升，数据不再是用一个普通的表格展示而已。新的功能需求需要给表格加上搜索、多选、拖拽、层级，这时候我们就要基于之前的表格封装一个 高级功能表格 advance-feature-table。当这个高级功能表格封装完毕后，我们就可以使用这个高级功能表格替换原来的那个el-table。</p> <h3 id="接口隔离原则-isp"><a href="#接口隔离原则-isp" class="header-anchor">#</a> 接口隔离原则 ISP</h3> <p>功能的设计，要根据具体场景进行划分，粒度要细一些，这样就可以像拼乐高积木一样，自由拼合。</p> <p>接口隔离原则 和 单一职责 有些相近。同样都是提倡 功能的划分、功能的专一。接口隔离原则结合单一职责会使你的设计意识和代码质量提升很多。</p> <p>比如：开发一个复杂的功能页面，实际上你可以把所有的代码全写到一个文件中，甚至图片资源也能转成base64码放到这个文件中，但是这样做会导致这个复杂的功能页面非常的臃肿、可读性极差、阅读成本上升、复杂度上升。</p> <p>如果这个页面中有些地方其它的功能页面也会用到，那么就可以把它抽离出来封装成一个一个的组件，比如高级列表组件、高级表格组件等。
如果有些数据需要在前端写死，可以将这些数据抽离出来封装成一个一个的配置文件，比如所有表格列的配置、图表的配置等。
如果有些数据需要特殊的处理，可以将这些处理方式，封装成一个一个的函数，比如工具函数、过滤函数、装饰函数等。</p> <p>这样就将功能的设计变换到具体的代码文件划分上，之前复杂的功能页面就可以由这些拆分的一个个功能拼接而成了，同时你在维护的时候也会方便很多，复杂度都被划分到多个小功能上了，可读性上去后页面也不臃肿了，阅读成本也降低了。</p> <p>记住要把握合适的粒度，如果粒度过于细就会导致文件数量和代码行数暴涨，这样一来可能会失去之前设计的意义，因为并没有提高你开发的效率，文件切换来切换去、函数跳来跳去等等，也会让你感觉程序的复杂度上升了很多。</p> <h3 id="依赖倒置原则-dip"><a href="#依赖倒置原则-dip" class="header-anchor">#</a> 依赖倒置原则 DIP</h3> <p>这个原则原本的释意是：抽象不应该依赖细节，细节应该依赖于抽象。在设计阶段，具体细节的实现方式比较多变，而抽象相对来说较稳定。</p> <p>当你去实现一个复杂的功能时，不应该先想着这个复杂的功能每一行代码的实现，而是想这个复杂功能能够划分成多少个部分，想清楚它有多少个部分后，再对每个部分去进行每一行代码的实现。</p> <p>先抽象、后具体。如果一开始去具体的进行每一行代码的实现，会导致功能的扩展性变弱。
简单的功能需求还好，功能稍微复杂点，就容易束手束脚，代码越写到后面就越冗余了。
虽然冗余的代码可以通过重构来降低，但如果你能够先想到，那么你重构的效率也会提高很多。</p> <p>在面向过程开发时，往往注重每一个详细的步骤，也就是依赖细节。
而在面向对象开发时，应当注重每一个“对象”，也就是依赖抽象。</p> <p>作为一个普通人而言，大都是走一步看一步。但不妨尝试着定下一个一个小目标，围绕这个目标去做相应的努力。
这一个一个的小目标就是就是面向对象中的注重的“对象”，你做的相应的努力就是每一个详细的步骤了。</p> <p>解决问题得先发现问题，然后再分解问题，最后逐一步骤的解决问题。这个问题可以是一个功能、模块、配置、页面、工程等等。先抽象，后具体，抽象的过程中能够汇聚核心要素，具体的过程中能够细化解决问题的步骤。</p> <p>这就是为啥叫依赖倒置原则，也就是不要再走一步看一步了，如果还是走一步看一步，别忘了重构(反思)。</p> <h3 id="迪米法特原则-lod-最少原则"><a href="#迪米法特原则-lod-最少原则" class="header-anchor">#</a> 迪米法特原则 LOD(最少原则)</h3> <p>迪米法特原则也叫最小知识原则，一样的，它和单一职责、接口隔离原则也有相似的地方。也是强调功能的划分，从而减少功能与功能之间的耦合。减少模块之间的耦合，提高模块之间的独立性。</p> <p>比如你封装一个过滤器，这个过滤器既可以功能A的过滤(时间格式化)，也能做功能B的过滤(表格数据为空的转换)，还能做功能CDEF的过滤(对请求响应后的失败、成功结果统一处理等等)，然后你还把功能代码全写到这一个过滤器中去，那么这个过滤器会变得越来越臃肿。</p> <p>此时你后期的维护成本就会上升，因为你可能会因为修改了过滤功能A的代码时而把其它BCDEF的过滤功能给影响了，毕竟你都写到一个里面。</p> <p>就像单一职责原则一样，功能的划分很重要，何况有时你还会进行功能之间的互调。所以需要让你的功能与功能之间相互独立，需要的时候通过参数或返回值的方式进行传递数据和获取数据，从而大大降低功能代码之间的耦合。</p> <p>功能与功能之间保持最少的了解，只与最直接的功能进行通信。</p> <p>比如我页面中需要一个带搜索功能的分页表格，这个时候我们可以封装一个组件，这个组件由 搜索框、表格、分页条构成，这个组件封装好了之后，我们只需要在页面中引入，然后以传入参数、绑定事件的方式来使用即可。不需要在页面中 直接写搜索框、表格、分页条的功能代码。</p> <p>到后期如果这个带搜索功能的分页表格组件需要更换成一个带树结构的表格组件，我们可以再封装一个树形表格组件，也是一样的，封装好了之后，直接使用即可，就不需要把树形表格组件中代码全拷贝到页面中来。</p> <p>和接口隔离原则一样，要注意把握合适的粒度，功能不是很复杂时，切记不要分的过细。</p> <h3 id="组合聚合复用原则-crp"><a href="#组合聚合复用原则-crp" class="header-anchor">#</a> 组合聚合复用原则 CRP</h3> <p>以组合或聚合的方式复用已有功能，而不是通过纯继承的方式来复用已有功能。</p> <p>组合和聚合的方式相对继承而言，它们要灵活很多，想用什么就借用相应对象的功能即可，不需要关注该对象中不需要的功能。</p> <p>组合和聚合实现方式很像，但是不同的是，组合本质上是一种强关联的关系，就像 人 和 人身上的器官，比如说人脸，人没了，一般来说你的脸庞也会很快老化销毁。而聚合是一种相对来说较弱的关联关系，就像 人 和 电脑、手机，人没了，电脑和手机还是可以继续使用的。</p> <p>继承会强制性让你把被继承的功能全部拿过来，这样会导致一些没用的功能也一起被带了过来，强制性被挂上多余的功能。</p> <p>比如 UI组件的官网中，有很多的组件，这些组件尽可能的分的很细，这样你用起来会很简单，只需要按照要求把它们拼装到一起即可。</p> <p>假如这些组件默认就非常的笨重，用一个组件需要你记500个属性100个事件，那么就会强制你去理解很多你本不用去理解的东西，那你用起来会很累，也很容易出很多莫名奇妙的问题。</p> <h3 id="不重复你自己-dry"><a href="#不重复你自己-dry" class="header-anchor">#</a> 不重复你自己 DRY</h3> <p>不要去写“重复的代码”，把写重复代码的功夫放到设计方面不香吗？只要你写了重复代码，需求一变，你就要改多倍的代码。</p> <p>这里说的“重复的代码”是指功能语义相同和代码逻辑重复的代码，如果是功能语义不同但代码逻辑重复的可以保留，因为从业务角度上来看，这些功能语义不同但但逻辑重复的代码更好适应需求的变化。</p> <p>功能语义相同和代码逻辑重复的代码该合并封装的合并封装、该删除抽象的删除抽象。</p> <p>比如 一开始业务需要的一个简单的表格展示数据即可，我只需要用的el-table组件即可。后期业务变更，需要一个带搜索和多选功能的分页表格，这时候我们可以封装一个这样的高级表格组件。之后业务又变更了，需要一个带层级的树形表格，我们可以在原来的高级表格组件基础上添加带层级的树形表格功能。</p> <p>不过我们没必要这样做，因为它们的功能语义不同，一个是普通高级表格，一个是带层级的树形表格，完全可以分两个组件，虽然这两个组件中部分代码逻辑，但是如果将这两个组件合并到一起，需要做的逻辑判断和后续需求变更带来的修改会使得这个组件熵增，如果我们分两个组件来分别开发和维护，则能够熵减。</p> <h3 id="尽量保持简单-kiss-简单原则"><a href="#尽量保持简单-kiss-简单原则" class="header-anchor">#</a> 尽量保持简单 KISS(简单原则)</h3> <p>从维护的角度和可读性的角度上来说，应该尽可能使用简单可读性高的方式去书写代码，不应该用逻辑重复、逻辑复杂、较偏门、可读性差的方式编写代码。如果必须得写一些高难度算法的代码，你可以通过书写注释来解释算法设计的大概意思，同时在注释上贴上该算法的相关文章链接。</p> <p>如果一个功能复杂，可以尝试使用前面的设计原则来简化功能代码的编写，如：单一职责、接口隔离原则、迪米法特原则等。这样就能逐步的化繁为简。如果前期没法保持那种简单的代码，后期可以适度重构来保持代码的简单，简单并不只是代码量少，而是可读性好、好维护。</p> <p>正如做项目要考虑后续的可维护性，代码可读性好，是能够提升开发效率和提高可维护性的。</p> <p>你也可以为了自己能够在这个项目组中保持不可替代性将代码写的一团糟连注释都没有[狗头保命]，不过你自己某天可能会觉得这是那个锤子写的渣渣代码[狗头安慰]。</p> <h3 id="不过度设计-yagni"><a href="#不过度设计-yagni" class="header-anchor">#</a> 不过度设计 YAGNI</h3> <p>功能设计好了，代码的编写会变得很得心应手，就算是需求变更，也能很轻松的实现功能。</p> <p>过度设计会增加一个程序的理解成本，如果这部分理解成本根本没必要，那么这样的设计就是浪费时间。</p> <p>比如：有一个功能模块比较特殊，只需要查询和下载的功能，结果你想让这个模块圆满一些，于是把新增、删除、修改功能都加上了。</p> <p>甚至你还留了很多扩展点，比如支持从别的模块传递数据到当前模块中、比如支持从别的模块拉取数据到当前模块中、比如将别的模块嵌入到当前模块内部等等。</p> <p>一个简单需求，如上所述的整了起来，代码变得比一开始复杂的多了。因为功能多了，所以相应的判断、处理的条件变多了。多余的功能势必会因为需求中没涉及到而去除掉，所以像这样多余的无用功并不会有意义，毕竟时间给浪费掉了。</p> <p>你的过度的设计会带来多余的工作量，你的过度的扩展会带来代码复杂度的上升，害人害己。</p> <p>是不是一个过度设计，得从业务需求的角度上考量。需求中的确没有，如果你觉得会有，可以先进行二次确认，确认后会有，那你这个设计就是不是过度的。假使确认后不会有，那么你这个设计就会是多余的，那么就没必要增加。</p> <p>如果你执意要增加这样的设计，切记要写上注释说明，避免以后你或者接手的人再看这个模块的功能代码时觉得需求不对劲而被误导。</p> <p>程序的设计有时会非常的巧妙，如果有空，要记得把设计思路用注释描述一下，避免一段时候后看不懂。</p> <blockquote><p>软件架构中也说过[十种原则] <code>https://mp.weixin.qq.com/s/A6o4hM4DPyg0vy9eudVZeA</code> ：单一职责、开闭原则、里氏替换、接口隔离、依赖倒置、简单原则、最少原则、表达原则、分离原则、契约原则。
一个懂设计原则的程序猿，写出来的代码可扩展性就是强，后续的人看代码如沐春风。相反，如果代码写的跟流水账似的，完全一根筋平铺下来，后续无论换谁接手维护都要骂娘。</p></blockquote></div></div> <div class="page-edit"><!----> <div class="tags"><a href="/tags/?tag=%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F" title="标签">#设计模式</a></div> <div class="last-updated"><span class="prefix">上次更新时间:</span> <span class="time">10年18月2023日 01时57分53秒</span></div></div> <div class="page-nav-wapper"><div class="page-nav-centre-wrap"><a href="/pages/50546120212/" class="page-nav-centre page-nav-centre-prev"><div class="tooltip">浅聊设计理念</div></a> <a href="/pages/6423406026/" class="page-nav-centre page-nav-centre-next"><div class="tooltip">工厂方法模式</div></a></div> <div class="page-nav"><p class="inner"><span class="prev">
        ←
        <a href="/pages/50546120212/" class="prev">浅聊设计理念</a></span> <span class="next"><a href="/pages/6423406026/"> 工厂方法模式 </a>
        →
      </span></p></div></div></div> <div class="article-list"><div class="article-title"><a href="/archives/" class="iconfont icon-bi">最近更新</a></div> <div class="article-wrapper"><dl><dd>01</dd> <dt><a href="/pages/45343271027/"><div>01.数据结构导论一览.md</div></a> <span>10-16</span></dt></dl><dl><dd>02</dd> <dt><a href="/pages/38850370637/"><div>30.2023年06月04日.md</div></a> <span>06-04</span></dt></dl><dl><dd>03</dd> <dt><a href="/pages/74707370537/"><div>08.与测量相关.md</div></a> <span>05-06</span></dt></dl> <dl><dd></dd> <dt><a href="/archives/" class="more">更多文章&gt;</a></dt></dl></div></div> </main></div> <div class="footer"><!----> 
  Theme by
  <a href="https://github.com/xugaoyi/vuepress-theme-vdoing" target="_blank" title="本站主题">Vdoing</a> 
    | Copyright © 2017-2023
    <span class="link">aiyoudiao 码二</span> <span>备案号：</span> <a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank" title="备案号">鄂ICP备2022002654号-1</a></div> <div class="buttons"><div title="返回顶部" class="button blur go-to-top iconfont icon-fanhuidingbu" style="display:none;"></div> <div title="去评论" class="button blur go-to-comment iconfont icon-pinglun" style="display:none;"></div></div> <!----> <!----> <!----></div><div class="global-ui"><div></div><APlayer audio="" fixed="true" theme="#b7daff" loop="loop" order="list" preload="auto" volume="0.7" mutex="true" lrc-type="3" list-max-height="250" storage-name="vuepress-plugin-meting" id="aplayer-fixed"></APlayer><div id="VuepressPluginLive2d"></div></div></div>
    <script src="/assets/js/app.bd2fbc77.js" defer></script><script src="/assets/js/3.72c9c947.js" defer></script><script src="/assets/js/147.1dfd721d.js" defer></script><script src="/assets/js/42.4251ca36.js" defer></script>
  </body>
</html>
